<template>
  <div>
    <a-button type="primary"
    @click="showAddFrom()">添加部门</a-button>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="deptList"
      :rowKey="(record) => record.id"
    >
    <template #do="text,record">
      <a-space>
        <a-button type="primary" shape="round" size="small" @click="showEditFrom(record.id)">编辑</a-button>
        <a-button type="danger" shape="round" size="small" @click="DeleteDept(record.id)">删除</a-button>
      </a-space>
    </template>
      
    </a-table>

    <form-box title="添加部门"
    v-show="showAddFromFlag"
    @hide="hideAddFrom"
    @update="AddDept">
      <a-form-item label="部门名称">
        <a-input placeholder="已有部门名称" v-decorator="['dept',{initialValue: getValue.name, rules:[{required: true, message: '请输入正确的部门名称'}]}]"></a-input>
      </a-form-item>
      <a-form-item label="负责人">
        <a-input placeholder="已有角色名称" v-decorator="['name',{initialValue: getValue.managementName, rules:[{required: true, message: '请输入正确的角色名称'}]}]"></a-input>
      </a-form-item>
    </form-box>

    <form-box title="编辑部门"
    v-show="showEditFromFlag"
    @hide="hideEditFrom"
    @update="EditDept">
      <a-form-item label="部门名称">
        <a-input placeholder="已有部门名称" v-decorator="['name',{initialValue: getValue.name, rules:[{required: true, message: '请输入正确的部门名称'}]}]"></a-input>
      </a-form-item>
      <a-form-item label="负责人">
        <a-input placeholder="已有角色名称" v-decorator="['managementId',{initialValue: getValue.managementName, rules:[{required: true, message: '请输入正确的角色名称'}]}]"></a-input>
      </a-form-item>
    </form-box>
  </div>
</template>

<script>
import { fetchDepartmentList, requestDeleteDepartment, requestAddDepartment, requestUpdateDepartment } from "@/api/system/dept"
import formBox from '../../components/formBox.vue';

export default {
  components: { formBox },
  data() {
    return {
      deptIndex: null,
      showAddFromFlag: false,
      showEditFromFlag: false,
      deptList: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "部门名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "负责人",
          dataIndex: "managementName",
          key: "managementName",
        },
        {
          title: "人员数量",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "操作",
          dataIndex: "do",
          key: "do",
          scopedSlots: { customRender: "do" },
        }

      ],
    }
  },
  methods:{
    //=======showEdit=======
    showEditFrom(index){
      this.deptIndex = index;
      this.showEditFromFlag = true;
    },
    hideEditFrom(){
      this.showEditFromFlag = false;
    },
    //========showAdd======
    showAddFrom(){
      this.showAddFromFlag = true;
    },
    hideAddFrom(){
      this.showAddFromFlag = false;
    },
    getDeptList(){
      fetchDepartmentList({
          token: "89c71f5f29d34b4699bcb516affc950d",
      }).then((res)=>{
          console.log("====Dept====",res.data.data);
          this.deptList = res.data.data;
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    EditDept({name, managementId}){
      requestUpdateDepartment({
        id: this.getValue.id,
        managementId: managementId,
        name: name,
      }).then((res)=>{
          console.log("=====修改成功=====",res);
        this.getDeptList();
        this.hideEditFrom();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    DeleteDept(deptId){
      requestDeleteDepartment({
        id: deptId
      }).then((res)=> {
        console.log("=====删除成功=====",res);
        this.getDeptList();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    AddDept({name, dept}){
      requestAddDepartment({
        name: dept,
        managementId: name,
      }).then((res)=> {
        console.log("=====添加成功=====",res);
        this.getDeptList();
        this.hideAddFrom();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    }
  },
  computed:{
    getValue(){
        if(this.deptIndex!=null)
        return this.deptList.filter(item =>
            item.id === this.deptIndex
        )[0];
        else return '';
    }
  },

  mounted(){
    this.getDeptList();
  }
}
</script>

<style>
</style>